<template>
  <div class="block">
    <div class="analysis-box">
      <div class="analysis-query">
        <el-select v-model="queryData.stationName" placeholder="请选择站点" style="width: 140px" class="filter-item">
          <el-option v-for="(item, index) in stationNameOptions" :key="index" :label="item" :value="item" />
        </el-select>

        <el-date-picker :clearable="false" v-model="value1" type="daterange" style="width: 250px" placeholder="选择开始时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="startChange" placement="bottom-start"></el-date-picker>
        <!-- <el-date-picker :clearable="false"  v-model="queryData.endTime" type="date" style="width: 140px" placeholder="选择结束时间" :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="endChange" placement="bottom-start"></el-date-picker> -->

        <el-button type="success" class="reset" @click="reset">重置</el-button>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </div>

      <el-table v-loading="listLoading" :data="rcvTableData" border fit height="600">
        <el-table-column label="序号" prop="id" align="center" width="50">
          <template slot-scope="scope">
            <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="获取时间" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.createTime.substring(0, 13) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="站名" width="80px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.stationName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="中时" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.ztime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="停时" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.ttime }}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column label="中时（没有老牌车）" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.ztimeNoLPC }}</span>
          </template>
        </el-table-column>

        <el-table-column label="停时（没有老牌车）" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.ttimeNoLPC }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="老牌车（24<=X<48小时）" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.lpc24 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="老牌车（48<=X<72小时）" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.lpc48 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="老牌车（>=72小时）" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.lpc72 }}</span>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination background layout="total, sizes, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize" :page-sizes="[10, 50, 100, 200, 500]" :total="total" :current-page="currentPage" align="center"></el-pagination>
    </div>
  </div>
</template>

<script>
// require('../components/echartsThreme')
import { getStationNames } from '@/api/dataQuery'
import { getZt } from '@/api/statistics'
import LaoPaiCheBar from './LaoPaiCheBar.vue'
import ZhongTingShiBar from './ZhongTingShiBar.vue'
import { isStringEmpty } from '@/utils/validate'
import dayjs from 'dayjs'
import './index.scss'
export default {
  data() {
    return {
      queryData: {
        stationName: '',
        startTime: dayjs().format('YYYY-MM-DD 00:00:00'),
        endTime: dayjs().format('YYYY-MM-DD 23:59:59')
      },
      value1: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 23:59:59')],
      listLoading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      stationNameOptions: [],
      rcvTableData: []
    }
  },
  created() {
    this.getAllStationNames()
  },
  mounted() {},
  beforeDestroy() {},
  components: {
    LaoPaiCheBar,
    ZhongTingShiBar
  },
  computed: {
    pickerOptions() {
      let _this = this
      return {
        disabledDate(time) {
          if (_this.queryData.startTime) {
            return time.getTime() < new Date(_this.queryData.startTime).getTime()
          } else {
            return false
          }
        }
      }
    }
  },
  watch: {},
  methods: {
    startChange(val) {
      this.queryData.startTime = val[0] + ' 00:00:00'
      this.queryData.endTime = val[1] + ' 23:59:59'
      // this.queryData.startTime = val + ' 00:00:00'
    },
    endChange(val) {
      this.queryData.endTime = val + ' 59:59:59'
    },
    getAllStationNames() {
      getStationNames().then(res => {
        if (res.code == 0) {
          this.stationNameOptions = res.data
          this.queryData.stationName = res.data[0]
          let newObj = this.queryData
          this.getTableData(newObj)
        } else {
          this.listLoading = true
          this.$message('暂无数据')
        }
      })
    },
    getTableData(newObj) {
      let obj = {
        page: this.currentPage,
        size: this.pageSize,
        obj: newObj
      }
      getZt(obj).then(res => {
        if (res.code == 0) {
          this.rcvTableData = res.data.records
          this.total = res.data.total
        } else {
          this.rcvTableData = []
          this.$message(res.msg)
        }
      })
    },
    reset() {
      this.queryData.startTime = dayjs().format('YYYY-MM-DD 00:00:00')
      this.queryData.endTime = dayjs().format('YYYY-MM-DD 23:59:59')
      this.currentPage = 1
      this.pageSize = 10
      this.value1 = [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 23:59:59')]
      this.getTableData(this.queryData)
    },
    search() {
      this.getTableData(this.queryData)
      // this.getZtInfo()
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      // this.getZtInfo()
      this.getTableData(this.queryData)
    },
    handleSizeChange: function(size) {
      this.pageSize = size
      // this.getZtInfo()
      this.getTableData(this.queryData)
    }
  }
}
</script>
